<template>
  <div class="courseDetails">
    <el-card body-style="width:80% margin:0px auto">
      <el-descriptions class="margin-top"
                       title="详情："
                       :column="2"
                       size="mini"
                       border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            课程名称
          </template>
          {{ListInfo.course_name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            状态
          </template>
          {{ListInfo.status}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            课程类型
          </template>
          {{ListInfo.category_info.category_name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            创建时间
          </template>
          {{ListInfo.created_at}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            简介
          </template>
          {{ListInfo.desc}}
        </el-descriptions-item>
      </el-descriptions>

    </el-card>

  </div>
</template>

<script>
import { getCourseDetail } from "@/api/system/training"
export default {
  props: ['course_id'],
  watch: {
    course_id (oldValue, newValue) {
      console.log(oldValue);
      console.log(newValue);
      // oldValue旧数据newValue新数据
      //监听值 如果不一样就触发事件
      if (oldValue != newValue) {
        this.listQuery.course_id = oldValue
        this.getList(); // 你的查询方法
      }
    },
  },
  created () {
    this.getList()
  },
  data () {
    return {
      ListInfo: null,
      listQuery: {
        course_id: this.course_id
      }
    }
  },
  methods: {
    getList () {
      getCourseDetail(this.listQuery).then((res) => {
        if (res.data.code == "200") {
          this.ListInfo = res.data.data[0]
        }
      })
    }
  }

}
</script>

<style lang="less" scoped>
.courseDetails {
  margin-top: 20px;
}
</style>